<template>
    <div class="con">
        <h2>为您推荐</h2>
        <br>
        <div class="content" v-for="(item,index) in arr" :key="index">
            <img :src="item.img" alt="" class="img1">
            <img :src="item.img1" alt="" class="img2">
            <p>
                <span class="style">{{item.style}} </span>
                <span class="money">{{item.money | money}} </span>
                <span class="price">{{item.price | money}} </span><br>
            </p>
            <p class="font">
                <span>{{item.title2}} </span>
                <span>{{item.title3}}</span>
            </p>
        </div>
    </div>
</template>

<script>
import {one} from "@/api/topapi.js"

export default {
    data(){
        return{
            arr:[]
        }
    },
    mounted(){
        one().then((ok)=>{
            this.arr=ok.data.list3
        })
    },
    filters:{
        money(val){
            return "￥" + val
        }
    }
}
</script>

<style lang="scss" scoped>
    .img1{
        width: 1.7rem;
        height: 2rem;
    }
    .img2{
        width: 1.7rem;
        height: 0.56rem;
        position: absolute;
        bottom: 0.48rem;
        left:0;
    }
    .content{
        position: relative;
    }
    .con{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    h2{
        font-size: 0.16rem;
        height: 0.16rem;
        width: 100%;
        color: #333;
        text-align: center;
        margin-top: 0.1rem;
    }
    p{
        .style{
        width: 0.32rem;
        height: 0.18rem;
        font-size:0.14rem;
        background: linear-gradient(270deg,#ff8080 0,#e65c5c 100%);
        color: #fff;
        }
    }
    .money{
        font-size:0.14rem;
        left: 0.4rem;
        color:#ff8080 ;
    }
    .price{
        font-size:0.14rem;
        border-left: 1px solid #ccc;
        left: 1.1rem;
    }
    .font{
        span{
            font-size: 0.12rem;
            color: #666;
        }
    }
    
</style>